<template>
    <div>
        <panle title='售后订单列表' content="售后订单列表"></panle>
            <el-form :inline="true" ref="form" :model="form" label-width="90px" style="margin: 20px;">
                <el-form-item label="售后订单号" prop="refund_num">
                    <el-input placeholder="请输入售后订单号" v-model="form.refund_num"></el-input>
                </el-form-item>
                <el-form-item label="订单号" prop="order_num">
                    <el-input placeholder="请输入订单号" v-model="form.order_num"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="tel">
                    <el-input placeholder="请输入手机号" v-model="form.tel"></el-input>
                </el-form-item>
                <el-form-item label="课程名称" prop="coursename">
                    <el-input placeholder="请输入课程名称" v-model="form.coursename"></el-input>
                </el-form-item>
                <el-form-item label="订单来源"  prop="from">
                    <el-select v-model="form.from" placeholder="请选择">
                        <el-option
                            v-for="item in orderfrom"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="订单状态"  prop="state">
                    <el-select v-model="form.state" placeholder="请选择">
                        <el-option
                            v-for="item in orderstate"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="退款时间"  prop="pay_time1">
                        <el-date-picker
                            v-model="form.pay_time1"
                            type="datetime"
                            placeholder="选择开始日期时间"
                            :picker-options="pickerOptions"
                            format="yyyy-MM-dd HH:mm:ss" 
                            value-format="yyyy-MM-dd HH:mm:ss"
                            >
                        </el-date-picker>
                </el-form-item>
                <el-form-item label="退款时间"   prop="pay_time2">
                        <el-date-picker
                            v-model="form.pay_time2"
                            type="datetime"
                            placeholder="选择结束日期时间"
                            :picker-options="pickerOptions"
                            format="yyyy-MM-dd HH:mm:ss" 
                            value-format="yyyy-MM-dd HH:mm:ss">
                        </el-date-picker>
                </el-form-item>
                <el-form-item label="创建时间" prop="create_time1">
                        <el-date-picker
                            v-model="form.create_time1"
                            type="datetime"
                            placeholder="选择开始日期时间"
                            :picker-options="pickerOptions"
                            format="yyyy-MM-dd HH:mm:ss" 
                            value-format="yyyy-MM-dd HH:mm:ss">
                        </el-date-picker>
                    </el-form-item>
                <el-form-item label="创建时间" prop="create_time2">
                        <el-date-picker
                            v-model="form.create_time2"
                            type="datetime"
                            placeholder="选择结束日期时间"
                            :picker-options="pickerOptions"
                            format="yyyy-MM-dd HH:mm:ss" 
                            value-format="yyyy-MM-dd HH:mm:ss">
                        </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search" size="mini">搜索</el-button>
                    <el-button @click="resetForm('form')" size="mini">重置</el-button>
                    <el-button size="mini" @click="init()" >刷新</el-button>
                </el-form-item>
            </el-form>
            <div class="table-wrap">
                <el-table :data="tableData"  :loading="loading" style="width: 100%;margin-bottom: 20px;" row-key="id" border stripe default-expand-all height="800"  >
                    <el-table-column type="selection" width="55"></el-table-column>
					<el-table-column prop="id" label="ID" width="55"></el-table-column>
                    <el-table-column prop="state" label="订单状态"></el-table-column>
                    <el-table-column prop="refund_num" label="售后订单号"></el-table-column>
					<el-table-column prop="order_num" label="订单号"></el-table-column>
					<el-table-column prop="coursename" label="课程名称"></el-table-column>
                    <el-table-column prop="fee" label="订单总金额"></el-table-column>
                    <el-table-column prop="payer_refund" label="实际退款金额"></el-table-column>
                    <el-table-column prop="tel" label="下单手机号"></el-table-column>
                    <el-table-column prop="wx_avatarurl" label="微信头像">
                        <template slot-scope="scope">
                            <el-image :src="scope.row.wx_avatarurl" fit="fill" style="width: 60px;height: 60px;"></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column prop="nickname" label="微信昵称"></el-table-column>
                    <el-table-column prop="from" label="订单来源"></el-table-column>
                    <el-table-column prop="pay_time" label="退款时间"></el-table-column>
                    <el-table-column prop="create_time" label="创建时间"></el-table-column>
                    <el-table-column prop="pay_method" label="支付方式"></el-table-column>
                </el-table>
                <div class="block">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="form.pageNumber" :page-sizes="[10, 50, 100, 200]" :page-size="form.pageSize" background layout="total, sizes, prev, pager, next, jumper" :total="form.total"> </el-pagination>
				</div>                
            </div>
    </div>
    
</template>

<script>
	import Panle from '@/components/Panle';
    import {getOrderData} from '@/api/live/selled_order';
    import { hasPermission, isShow } from '@/common/permission';

    export default {
        components:{
            Panle
        },
        data() {
            return {
                orderfrom:[{
                    value: '0',
                    label: '直播间下单'
                },{
                    value: '1',
                    label: '课程购买链接下单'
                }],
                orderstate:[{
                    value: '1',
                    label: '退款成功'
                },{
                    value: '2',
                    label: '退款关闭'
                },{
                    value: '3',
                    label: '退款中'
                },{
                    value: '4',
                    label: '退款异常'
                }],
                tableData: [],
                form: {
                    refund_num:'',
                    order_num:'',
                    coursename: '',
                    from:'',
                    tel: '',
                    state: '',
                    create_time1: '',
                    create_time2: '',
                    pay_time1: '',
                    pay_time2: '',
                    pageSize:10,
                    pageNumber:1,
                    total:0
                },
                pickerOptions: {
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                        picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', date);
                        }
                    }]
                },

            }
        },
        created(){
			this.init();
        },
        methods: {
            hasPermission,
            isShow,
            init(){
                this.loading = true;
                console.log(this.form);
				getOrderData(this.form).then((res)=>{
					console.log(res);
					this.tableData = res.data.list;
					this.form.total = res.data.total;
					this.loading = false;
				})
            },
            search: function() {
				this.loading = true;
                this.form.pageSize = 10;
				this.form.pageNumber = 1;
				this.init();
			},
			handleSizeChange: function(e) {
				console.log(e);
				this.form.pageSize = e;
				this.init();
			},
			handleCurrentChange: function(e) {
				console.log(e);
				this.form.pageNum = e;
                this.form.pageNumber = e;
				this.init();
			},
            resetForm(formName) {
                this.$refs[formName].resetFields();
                this.init();
            }
        }
    }






</script>

<style>

    .search-content{
        width: 100%;
        margin: 20px;
    }

   

</style>